<!-- 今日加速域名排名 -->
<template>
  <div class="wrap">
    <span class="title">top <span>10</span> 今日加速域名排名</span>
    <!-- <div ref="linechart" id="chart2" :style="{height:height,width:width}"/> -->
    <el-table stripe border :data="dataList" style="width: 100%;margin: 15px 0;">
      <el-table-column label="序号"  width="50" type="index"></el-table-column>
      <el-table-column label="ip"  show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.URL }}
        </template>
      </el-table-column>
      <el-table-column label="加速次数" width="80" >
        <template slot-scope="scope">
          {{ scope.row.Count }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { connrequest } from '@/api/firstPage'
import { getNowDay } from '@/utils/index.js'
import * as echarts from 'echarts'
export default {
  data() {
    return {
      width: '100%',
      height: '350px',
      chartData:[],
      dataList:[]
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.getData()
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.initChart()
  },
  methods:{
    initChart() {
      // this.chart = echarts.init(this.$refs.linechart)
      // this.setOptions()
    },
    async getData() {
      let URL = []
      let num = []
      let NowDay = getNowDay('time')
      const data = {
        Filter: {
          StartTime: NowDay,
          EndTime: "",
          AccessType: 2,
          SumCount: 10
        }
      }
      const res = await connrequest('GetShadowURLSumGroupByURL', data)
      if(res.Data){
        res.Data.map(item => {
          // item.Count = item.Count.toLocaleString()
          URL.push(item.URL)
          num.push(item.Count)
        })
        this.dataList = res.Data
        // this.setOptions({URL,num})
      }else{
        const dom = document.getElementById('chart2');
        dom.innerHTML = '<div class="el-table__empty-block"><span class="el-table__empty-text">暂无数据</span></div>';
        dom.removeAttribute('_echarts_instance_');
      }
    },
    setOptions({ URL, num } = {}) {
      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '5%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: [0, 0.01],
          data: URL, //倒叙排列
          // show: false
          // axisLabel: {
          //   formatter: function (value) {
          //     return value.split("").join("\n");
          //   },
          // }
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '加速次数',
            type: 'bar',
            data: num //倒叙排列
          }
        ]
      })
    }
  }
}
</script>
<style scoped lang='scss'>
.wrap{
  height: 370px;
  overflow: hidden;
  .el-table{
    border-bottom: none;
  }
}
</style>